<template>
  <div class="cardCharge">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">会员卡充值</x-header>
    <div class="topHolder"></div>
    <group label-width="5em">
      <cell title="会员卡号" class="number" :value="paramCardNumber"></cell>
      <cell title="会员卡名称" :value="paramCardName"></cell>
      <x-input title="输入金额" mask="9999999" :max="7" v-model="chargeAmount" text-align="right" required placeholder="点击输入"></x-input>
    </group>
    <group-title>该卡每次充值最低<span v-text="paramCardMinCharge"></span>元</group-title>
    <box gap="1rem 0.8rem">
      <x-button :gradients="['#6F1BFE', '#9479DF']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="立刻支付"></x-button>
    </box>
  </div>
</template>

<script>
  import { Box, Group, Cell, XInput, GroupTitle, XButton, numberComma } from 'vux'
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'cardCharge',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramMemberCardUserId:this.$route.params.memberCardUserId,
        paramCardName:this.$route.params.cardName,
        paramCardNumber:this.$route.params.cardNumber,
        paramCardMinCharge:this.$route.params.cardMinCharge,
        chargeAmount:''
      }
    },
    components:{
      Box,
      Group,
      Cell,
      XInput,
      GroupTitle,
      XButton
    },
    computed:{

    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      submit(){
        if(parseInt(this.chargeAmount) > parseInt(this.paramCardMinCharge)){

        }else{
          message({message:'请输入大于' + this.paramCardMinCharge + '的金额',type:'error'})
        }
      }
    },
    mounted(){
      this.$store.commit('updateLoadingStatus',{isLoading:false})
    }
  }
</script>

<style lang="scss" scoped>
  .cardCharge{
  }
</style>
